Cruyun's Blog

Talk is cheap, show you my code

走进Web前端

• 标签: CSS, HTML

欢迎各位萌新（and 隐藏的dalao）戳进这里啦，在前端入门我们首先从HTML和CSS开始，什么是HTML和CSS呢？

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。

层叠样式表（英语：Cascading Style Sheets，简写 CSS），一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言。

基础教程请戳：

大家先在这里了解HTML和CSS的基础语法以及我们接下来要使用的一些基本标签如<a>、<div>、<span>等和CSS的选择器即可。

在编写代码之前，你需要有一个编辑器。我们推荐VS Code、Sublime Text、Atom。在编辑器里，你可以编写你的html和css代码。下载地址：VS Code、Sublime Text，atom

本教程中，我们教大家用HTML和CSS实现一个酷炫的button。

首先来看看我想实现的效果吧
finish.gif

那接下来我们就来学习如何一步一步实现这个效果吧。

首先写好HTML的基础部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ghost Button</title>
  <!-- 我是注释：我们建议你将HTML和CSS分离，然后像这样将CSS文件在此处引入。-->
   <link rel="stylesheet" href="./style.css">
  <!-- 当然你也可以使用<style>标签把CSS代码放在这里。-->
</head>
<body>
<!-- 我们的Ghost Button就是写在这里啦 -->
</body>
</html>

接下来我们来写button：

1
2
3
4
<div>
    MuxiStudio
    <span> > </span>
</div>

这样就会出现“ MuxiStudio › ”这行字。使用<a>可以把这行字变成链接，这样你点击这个button就能跳转到我们的官网了。

1
2
3
4
5
6
<div>
    <a href="http://muxistudio.com/">
        MuxiStudio
        <span> › </span>
    </a>
</div>

接下来就是重头戏，我要用CSS魔法给button增加酷炫的效果。使用类选择器，我在CSS里面就可以给它们绑定样式。

先在HTML中绑定好类名（class的命名你可以随意）。

1
2
3
4
5
6
<div class="button">
    <a href="http://muxistudio.com/">
        MuxiStudio
        <span class="shift"> › </span>
    </a>
</div>

👇是CSS部分

用类选择器(基本语法是.加上class类名）给button设置边框、宽度、字体等属性，里面添加它的属性（基本语法是 属性名:值;）

1
2
3
4
5
6
.button {
    position: relative;
    border: 2px solid #2e2e2e; /* 边框属性，分别为边框粗细 实虚 颜色 */
    padding: 20px 15px; /* 上下内边距 左右内边距 */
    text-align: center; /* 内容水平居中 */
}

为了美观（酷炫），我又加了一些别的属性

1
2
3
4
5
6
7
8
9
.button {
    position: relative;
    border: 2px solid #2e2e2e;
    text-align: center;
    padding: 20px 15px;
    text-transform: uppercase; /* 小写字母转换成大写 */
	  letter-spacing: 4px; /* 增加字符间距 */
	  cursor: pointer; /* 光标呈现为指示链接的指针（一只手） */
}

CSS里面可以多个class设置同样的样式，这里对<a>和<body>我用了元素选择器，给所有<a>和<body>设置了属性，所以这里同时使用了类选择器设置.button和元素选择器设置<a>，我们这样写：

1
2
3
4
5
6
7
8
9
10
11
body {
	background: #000000;
}
.button a {
	color: #969696; /* 内容颜色 */
	font-family: 'Varela Round'; /* 字体 */
	text-decoration: none; /* 否则会有难看的链接下划线 */
	width: 200px; /* 宽度 */
   	height: 100px; /* 高度 */
}

接下来我要实现光标移到button的时候出现动画效果,使用伪类选择器:hover。

1
2
3
4
5
6
7
8
9
.button:hover {
	border-color: #ffffff;
}
.button:hover a {
    color: #ffffff;
}
.button:hover .shift {
	padding-left: 10px;
}

光标移到上面的时候，边框和文字都会变成白色(#ffffff)，文字会出现有10px的内边距。
现在你得到了这个：

相信到这里你已经基本掌握书写HTML和CSS的正确语法，接下来实现漂亮的白光划过的动画。
其实这是一个白色的矩形，给这个矩形添加相关的动画，让他从button划过。

同样，先在HTML里面写上标签,类名我定为”mask”。

1
2
3
4
5
6
7
<div class="button">
		<a href="muxistudio.com">
		    MuxiStudio
		    <span class="shift"> › </span>
		</a>
		<div class="mask"></div>
	</div>

CSS里面设置mask的属性

1
2
3
4
5
6
.mask {
	background: rgba(255,255,255,0.5); /* 透明色 */
	position: absolute;
	width: 200px;
	height: 100px;
}

下面重点介绍一下CSS动画的两个属性transform和transition，在这个动画里面我们主要使用了transform 3D效果，关于基础的transform 2D知识可以戳这里。

transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)或倾斜(skew)。

在这里我们用到的值有：

rotate3d(x,y,z,angle) 定义 3D 旋转。

scale3d(x,y,z) 定义 3D 缩放转换。

translate3d(x,y,z)定义 3D 转换。

CSS transition 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。

transition 属性是一个简写属性，用于设置四个过渡属性：

  • transition-property指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。

  • transition-duration指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长。

  • transition-timing-function指定一个函数，定义属性值怎么变化。缓动函数 Timing functions 定义属性如何计算。
  • transition-delay指定延迟，即属性开始变化时与过渡开始发生时之间的时长。

语法是transition: <property> <duration> <timing-function> <delay>;，默认值：all 0 ease 0，请始终设置transition-duration属性，否则时长为 0，就不会产生过渡效果。

给.mask设置transform属性，

1
2
3
.mask {
    transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg);
}

.mask从一个水平的矩形变倾斜、旋转。
在光标移过button的时候希望他发生动画，所以再设置一个hover时的位置变换。

1
2
3
4
.button:hover .mask {
	background: #ffffff;
	transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
}

用transition属性设置过渡的效果。

1
2
3
.mask {
    transition: all 1.1s ease;
}

顺便给刚才的button也加上过渡

1
2
3
4
5
6
.button .shift {
	  transition: all 1.1s ease;
}
.button {
    transition: border 1s ease, color .6s ease, background 3s ease;
}

然后.mask超过button的部分设置为不可见，在.button添加overflow: hidden;属性。这样我们就得到一个漂亮的Ghost Button。

为了兼容更多的浏览器（比如Chrome、Safari），transform和transition属性要多加带有一行-webkit-前缀，例如

1
2
3
4
.button {
    -webkit-transition: border 1s ease, color .6s ease, background 3s ease;
    transition: border 1s ease, color .6s ease, background 3s ease;
}

最后我做了一点美化，让button放置在页面的中央，设置了button的最大宽度max-width: 270px;（防止拉伸浏览器的时候效果不够），并且将transition属性中的ease值换成了贝塞尔曲线cubic-bezier(0.19,1,.22,1)就得到了文章开头的效果。

我们希望你们能实现的效果是：将这个button放置在页面的正中央，并且设置页面的背景色为渐变效果。

test.gif

当然，期待屏幕前的你们能实现更好玩更好看的效果，对此教程有任何疑惑都可以向我们提问。

完成之后请将你们的代码传到GitHub上，GitHub地址填入报名表中。

使用Windows系统的同学需要自行安装git，下载链接 ->gitbash，使用Linux系统的同学需要在终端下载git，使用Mac OS系统的同学在终端中直接使用git即可。

最后送上Git 基础命令，祝大家编程愉快~